<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地址管理</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
		<link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css" />
		<style>
			.el-checkbox__input.is-checked+.el-checkbox__label{
				
				color: #007D36;
			}
		 .el-checkbox__input.is-checked .el-checkbox__inner {
		 	background-color: #007D36;
		 	border-color: #007D36;
		 }
		 .el-button--primary {
		     color: #FFF;
		     background-color: #007D36;
		     border-color: #007D36;
		 }
		 .el-cascader .el-input{
				width:  31.25rem;
			
		 }
		</style>
	</head>
	<body>
		<div style="width: 67.5rem;height: auto;" class="divColumn" id="content">
			<div style="width: 100%;height: 31.25rem;border: 0.0625rem solid #f0f0f0;" class="divColumn">
				<div style="width: 100%;height: 2.5rem;background: #F5F8FA;;color: black;font-weight: 600;" class="divColumnCenter">
					<span style="margin-left: 1.25rem;">新增收获地址</span>
				</div>
				<div style="width: 37.5rem;margin-left: 1.25rem;margin-top: 1.25rem;" class="divColumn">
					<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
						<el-form-item label="地址区域:">
							<el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader>
						</el-form-item>
						<el-form-item label="详细地址:" required>
							<el-input v-model="formLabelAlign.region" placeholder='请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息'></el-input>
						</el-form-item>
						<el-form-item label="邮政编码:">
							<el-input v-model="formLabelAlign.type" placeholder='请填写邮编'></el-input>
						</el-form-item>
						<el-form-item label="收货人:" required>
							<el-input v-model="formLabelAlign.region" placeholder='请输入收货人姓名'></el-input>
						</el-form-item>
						<el-form-item label="手机号码:" required>
							<el-input v-model="formLabelAlign.region" placeholder='电话号码、手机号码必须填一项'></el-input>
						</el-form-item>
						<el-form-item label="" required>
							<el-checkbox label="是否设为默认地址" name="type"></el-checkbox>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">保存</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div style="width: 100%;height: 2.625rem;background: #E3FDF3;margin-top: 1.25rem;" class="divColumnCenter">
				<span style="color: #999999;margin-left: 1.25rem;">已保存了5条地址，还能保存15条地址</span>
			</div>
			<div style="width: 100%;">
				<template>
					<el-table :data="tableData" style="width: 100%" :border='true'>
						<el-table-column label="收货人" width="120" align='center'>
							<template slot-scope="scope">
								<span>{{scope.row.name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="所在区" width="180" align='center'>
							<template slot-scope="scope">
								<span>{{scope.row.name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="详细地址" width="200" align='center'>
							<template slot-scope="scope">
								<span>{{scope.row.address }}</span>
							</template>
						</el-table-column>
						<el-table-column label="邮编" width="100" align='center'>
							<template slot-scope="scope">
								<span>{{scope.row.name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="电话/手机" width="120" align='center'>
							<template slot-scope="scope">
								<span>{{scope.row.name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" align='center'>
							<template slot-scope="scope">
								<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
								<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">设为默认</el-button>
								<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>

			</div>


		</div>

		<script src="js/cityData.js"></script>
		<script>
			var content = new Vue({
				el: '#content',
				data: {
					labelPosition: 'right',
					formLabelAlign: {
						name: '',
						region: '',
						type: ''
					},
					options: options,
					value: '请选择省/市/区/街道',
					tableData: [{
						city: '2016-05-02',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					}, {
						city: '2016-05-04',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1517 弄'
					}, {
						city: '2016-05-01',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1519 弄'
					}, {
						city: '2016-05-03',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}]
				},
				methods: {
					handleChange(value) {
						console.log(value);
					},
					onSubmit: function() {

					},
					handleEdit(index, row) {
						console.log(index, row.address);
					},
					handleDelete(index, row) {
						console.log(index, row);
					}


				}


			})
		</script>





	</body>
</html>
